<template>
  <div>
    <h1>自定义指令-自动获取焦点</h1>
    用户名<input v-focus type="text">
    <p v-color="color">我是一个可爱的p</p>
    <button @click="color='pink'">点级我修改</button>
  </div>
</template>

<script>
export default {
   //局部注册
   directives:{
    focus:{
      inserted(el){
        el.focus()
      }
    },
    color:{
      // 参数1: 指令绑定的元素
      // 参数2: 参数对象
      // 参数也是可以解构赋值的, 只要参数是对象或数组就可以
      inserted(el,binding){
        //binding是el身上的一个对象
        //insersed 页面加载后 自动执行 只执行一次
       el.style.color=binding.value
      },
      //点击再次执行updata
      update(el,binding){
         el.style.color=binding.value
      }
    }
   },
  data() {
    return {
      color:'yellow'
    };
  },

 
};
</script>

<style lang="scss" scoped>

</style>